<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图书校验</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">

    <!----搜索菜单----->
    <el-form :inline="true" :model="bookVo" class="demo-form-inline">
        <el-form-item label="图书名称" >
            <el-input v-model="bookVo.bookName" placeholder="请输入图书名称"></el-input>
        </el-form-item>

        <el-form-item label="图书作者">
            <el-input v-model="bookVo.bookAuthor" placeholder="图书作者"></el-input>
        </el-form-item>

        <el-form-item label="选择类型" prop="booktypeId">
            <el-select v-model="bookVo.booktypeId" placeholder="选择类型">
                <el-option v-for="b in booktypes1" :label="b.booktypes"  :key="b.booktypeId" :value="b.booktypeId"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="warning" icon="el-icon-plus" @click="addShow">添加校验</el-button>
        </el-form-item>

    </el-form>

    <!------校验表格-------->
    <el-table
            ref="multipleTable"
            :data="bookData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                :selectable="selectEnable"
                width="55"
                fixed="left">
        </el-table-column>
        <el-table-column
                prop="bookId"
                label="图书编号"
                width="120"
                fixed="left">
        </el-table-column>

        <el-table-column
                prop="bookIco"
                label="图书图片"
                width="120">
            <template slot-scope="scope">
                <img style="width: 140px;height: 70px" :src="scope.row.bookIco">
            </template>
        </el-table-column>


        <el-table-column
                prop="bookName"
                label="图书名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="bookAuthor"
                label="作者"
                width="120">
        </el-table-column>

        <el-table-column
                prop="bookPrice"
                label="图书价格"
                width="120">
        </el-table-column>

        <el-table-column
                prop="bookCount"
                label="图书数量"
                width="120">
        </el-table-column>


        <el-table-column
                prop="booktype.booktypes"
                label="图书类型"
                width="120">
        </el-table-column>

        <el-table-column
                label="校验数量"
                width="120"
                fixed="right"
        >
            <template slot-scope="scope">
                <el-input v-model="verifyNum[scope.row.bookId]" placeholder="校验数量"
                          @change="handleChange(scope.row.bookId,scope.row.bookCount)"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                label="报损数量"
                width="120"
                fixed="right"
        >
            <template slot-scope="scope">
                <el-input v-model="damageNum[scope.row.bookId]" placeholder="报损数量"
                          @change="handleChange2(scope.row.bookId,scope.row.bookCount)"></el-input>
            </template>
        </el-table-column>


    </el-table>


    <!---确认申请校验对话框---->
    <el-dialog
            title="信息"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="addDialogClose"
    >
        <span style="font-size: 20px">进行校验申请吗</span>

        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirmAdd">确 定</el-button>
                <el-button @click="addDialogClose">取 消</el-button>
              </span>
    </el-dialog>


    <!--分页--->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>


</body>
<script>
    let vm=new Vue({
            el:"#app",
            data:{
                //当前的页码
                current: 1,
                //每页的条数
                pageSize: 5,
                //总条数
                total: 0,
                bookData:[],
                bookVo:{},
                booktypes1:[],
                addList: [],
                //校验数量
                verifyNum: {},
                //报损数量
                damageNum: {},
                dialogVisible2:false,

                verifyBooks:[],
            },
            created(){
               this.loadBooks()
                this.loadBookType()
            },
            methods:{
                loadBooks(){
                     axios.post("/book/list/"+this.current+"/"+this.pageSize,this.bookVo).then(res=>{
                        if(res.data.code===200){
                                this.bookData=res.data.data.list
                                 this.total=res.data.data.total
                        }
                    })
                },

                //初始化图书类型表格数据
                loadBookType(){
                    axios.get("/book/booktype").then(result=>{
                        this.booktypes1=result.data.data;
                    })
                },

                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },

                //页面显示数据条数改变重新渲染数据
                handleSizeChange(val) {
                    this.pageSize=val;
                    this.loadBooks()
                },

                //页码改变重新渲染数据
                handleCurrentChange(val) {
                    this.current=val;
                    this.loadBooks()
                },

                //搜索事件
                search(){
                    this.current=1;
                    this.loadBooks()
                    this.bookVo={}
                },

                //添加图书校验
                addShow(){
                    //判断是否选择了校验书籍
                    if(this.multipleSelection===undefined){
                        this.$message({
                            message: '请选择要提交校验书籍！',
                            type: 'warning'
                        });
                        return;
                    }
                    //判断是否输入数据，没有则弹出警告
                    for (let x of this.multipleSelection) {
                        if(this.verifyNum[x.bookId]===undefined||this.damageNum[x.bookId]===undefined){
                            this.$message({
                                message: '请检查你的数据结构',
                                type: 'warning'
                            });
                            return;
                        }
                    }
                    this.dialogVisible2=true

                },

                //添加弹窗关闭事件
                addDialogClose() {
                    this.dialogVisible2 = false
                },

                handleChange(id, counts) {
                    if (this.verifyNum[id] != null && this.verifyNum[id] != '') {
                        if (this.verifyNum[id] <= counts && this.verifyNum[id] >= 0) {
                            this.$set(this.damageNum, [id],0)
                        } else {
                            this.$set(this.verifyNum, [id], '')
                            this.$set(this.damageNum, [id], '')
                            this.$message({
                                message: '输入数量有误',
                                type: 'warning'
                            });
                        }
                    }
                },
                handleChange2(id, counts) {
                    if (this.damageNum[id] != null && this.damageNum[id] != '') {
                        if (this.damageNum[id] > this.verifyNum[id] && this.damageNum[id] < 0) {
                            this.$set(this.verifyNum, [id], '')
                            this.$set(this.damageNum, [id], '')
                            this.$message({
                                message: '输入数量有误',
                                type: 'warning'
                            });
                        }
                    }
                },
                confirmAdd(){
                    for (let x of this.multipleSelection) {
                        let verifyBookVo={
                            bookId:0,
                                damageCount:0,
                                verifyCount:0,
                        }
                           verifyBookVo.bookId=x.bookId
                           verifyBookVo.verifyCount=this.verifyNum[x.bookId]
                           verifyBookVo.damageCount=this.damageNum[x.bookId]
                           this.verifyBooks.push(verifyBookVo)
                    }


                    axios.post("/verifyBook/addVerify",this.verifyBooks).then(res=>{
                            if(res.data.code===200){
                                this.$message.success(res.data.msg);
                                this.addDialogClose()
                                this.$refs.multipleTable.clearSelection();

                            }
                    })



                },

                selectEnable(row) {
                    if (row.bookCount !==0) {
                        return true
                    }
                },
            }
    })
</script>
</html>
